<template>
  <div class="zy-content">
    <!--    报工-->
    <!--    <div class="searchBox search-box-layout">-->
    <!--      <search :columns="searchData" @getSearch="getSearch(arguments)"></search>-->
    <!--    </div>-->
    <div class="list-layout mt16">
      <div class="btns clear">
        <!--        {{ $t('common.listInformation') }}-->
        <span class="title">
          报工信息区
        </span>
        <Button @click="handleAdd">
          报工
        </Button>

      </div>
      <div class="tableContent" :style="{ height: tableHeight + 'px' }">
        <Table :columns="columns" ref="selection" border :data="list" :height="tableHeight">
          <template slot-scope="{ row }" slot="action">
            <Row :gutter="6">
              <Col span="24">
                <span class="operationBtn" @click="toDetail(row)"><i
                    class="iconfont zy-common-bianji"></i>详情</span>
                <span class="operationBtn" @click="handleEditRow(row)"><i
                    class="iconfont zy-common-wancheng"></i>开工</span>
              </Col>
              <Col span="24">
                <span class="operationBtn" @click="reportWork(row)"><i
                    class="iconfont zy-common-bianji"></i>报工</span>

                <span class="operationBtn" @click="handleDeleteRow(row)"><i
                    class="iconfont zy-common-shanchu"></i>删除</span>
              </Col>

            </Row>


          </template>
        </Table>
      </div>
      <!--      <div class="pageWrap mt16">-->
      <!--        <pageLeftTitle :total="total"/>-->
      <!--        <Page :total="total" :page-size="params.pageSize" :current="params.current" @on-change="changePageNum"-->
      <!--              @on-page-size-change="changePageSize" show-sizer/>-->
      <!--      </div>-->
    </div>
    <!--    <Modal :mask-closable="false" v-model="deleteShow" title="删除" class="modal-title-layout">-->
    <!--      <div class="icon red">-->
    <!--        <i class="iconfont zy-common-shanchu"></i>-->
    <!--      </div>-->
    <!--      <p class="title">-->
    <!--        <span>{{ $t('common.sureDelete') }}</span>-->
    <!--      </p>-->
    <!--      <div slot="footer">-->

    <!--        <Button type="default" @click="deleteShow = false">取消</Button>-->
    <!--        <Button type="primary" @click="handleDeleteSure">确定</Button>-->
    <!--      </div>-->
    <!--    </Modal>-->


    <!--    报工弹框-->
    <Modal :mask-closable="false" v-model="createStatus" title="报工" class="modal-title-layout">
      <Form
          ref="reportWorkItem"
          :model="reportWorkItem"
          class="form-container formList"
          label-position="top"
          :rules="rules"
      >
        <Row :gutter="16">
          <Col span="12">
            <FormItem
                label="工单号"
                class="custom-form-item"
            >
              <Input
                  disabled
                  v-model="reportWorkItem.workNo"
                  placeholder=""
                  class="inputBorder"
              ></Input>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem
                label="产品名称"
                class="custom-form-item"
            >
              <Input
                  disabled
                  v-model="reportWorkItem.productName"
                  placeholder=""
                  class="inputBorder"
              ></Input>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem
                label="机台名称"
                class="custom-form-item"
            >
              <Input
                  disabled
                  v-model="reportWorkItem.equipmentName"
                  placeholder=""
                  class="inputBorder"
              ></Input>
            </FormItem>
          </Col>

          <Col span="12">
            <FormItem
                label="已下发数量"
                class="custom-form-item"
            >
              <Input
                  disabled
                  v-model="reportWorkItem.orderCount"
                  placeholder=""
                  class="inputBorder"
              ></Input>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem
                label="报工数量"
                required
                prop="count"
                class="custom-form-item"
            >
              <Input
                  type="number"
                  v-model="reportWorkItem.count"
                  placeholder="请输入报工数量"
                  class="inputBorder"
              ></Input>
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div slot="footer">
        <Button type="default" @click="createStatus = false">取消</Button>
        <Button type="primary" @click="handleStart('reportWorkItem')">确定</Button>
      </div>
    </Modal>

    <!--    <importExcelModal :importExcelStateF="importExcelState" v-if="importExcelState"-->
    <!--                      @importExcelChange="importExcelChange">-->
    <!--    </importExcelModal>-->
  </div>
</template>

<script>
import {basedataEquipmentAllApi} from '@/api/dataBasic/process.js'
import ImportExcelModal from '@/components/importExcel.vue';
import fileDownload from "js-file-download";
import search from "@/components/curd/searchList.vue";
import toggleTableOperation from '@/mixins/toggleTableOperation';
import {
  BomApi,
  editApi,
  addApi,
  deleteApi,
  productApi,
  queryByWorkOrder,
  materialAllApi
} from '@/api/dataBasic/materialBom'

export default {
  name: "workPlanFeeding",
  components: {ImportExcelModal, search},
  mixins: [toggleTableOperation],
  data() {
    return {
      pageId: null,
      reportWorkItem: {},
      reportWorkShow: false,
      params: {
        pageSize: 20,
        current: 1
      },
      startForm: {},
      startShow: false,
      productBom: [],
      searchData: [
        {
          title: "工单号",
          key: "code"
        }
      ],
      rules: {
        // materialId: [
        //   {required: true, message: "请选择物料", trigger: "blur"},
        // ],
        count: [
          {required: true, message: "请输入投料数量", trigger: "blur"},
        ]
      },
      columns: [
        {
          title: '序号',
          width: 80,
          align: 'center',
          render: (h, params) => {
            return h('span', params.index + (this.params.current - 1) * this.params.pageSize + 1);
          },
        },
        {
          title: '工单号',
          key: 'workNo',
          align: 'center',
          minWidth: 200,
          resizable: true,
        },
        {
          title: '数量',
          key: 'count',
          align: 'center',
          minWidth: 200,
          resizable: true,
        },
        {
          title: '创建时间',
          key: 'createTime',
          align: 'center',
          minWidth: 200,
          resizable: true,
        }
      ],
      importExcelState: false,
      list: [],
      total: 0,
      deleteShow: false,
      currentItem: {},
      createStatus: false,
      form: {},
      nameList: [],
      searchParams: {},
      equipmentList: []

    }
  },
  computed: {
    tableHeight() {
      return window.innerHeight - 250;
    }
  },

  mounted() {
    this.pageId = this.$route.query.id ? this.$route.query.id : null;
    this.getSearchList()
    this.getList()
    // this.relevance()
  },
  methods: {
    getList() {
      this.axios
          .post("/api/basedataReportWorkRecord/getAll", {workOrderId: this.pageId}).then(res => {
        if (res.code !== 200) {
          this.$Message.warning(res.message);
          return false
        }
        this.list = res.data
      })
    },
    getSearchList() {
      materialAllApi().then(res => {
        if (res.code === 200) {
          this.productBom = res.data
        }
      })
    },
    //点击报工
    handleAdd() {
      this.reportWorkItem = {};
      this.createStatus = true;
    },
// 确认报工
    handleStart(formName) {
      this.$refs[formName].validate((valid) => {
            if (valid) {
              const param = JSON.parse(JSON.stringify(this.reportWorkItem))
              param.workOrderId = this.pageId
              this.axios
                  .post("/api/basedataReportWorkRecord/save", param)
                  .then((res) => {
                    if (res.code === 200) {
                      this.$Message.success(res.message);
                      this.reportWorkItem = {};
                      this.createStatus = false;
                      this.getList();
                    } else {
                      this.$Message.warning(res.message);
                    }
                  });
            }
          }
      )
    },
    relevance() {
      basedataEquipmentAllApi().then(res => {
        if (res.code === 200) {
          this.equipmentList = res.data
          this.searchData[0].dicData = res.data
        }
      })
      materialAllApi().then(res => {
        if (res.code === 200) {
          this.productBom = res.data
          this.searchData[1].dicData = res.data
        }
      })
    },
    getSearch(arg) {
      this.searchParams = arg[0] || {};
      this.getList();
    },

    importExcelChange(val) {
      this.importExcelState = false;
      if (val === 'success') {
        this.$Message.success('导入成功!');
        this.changeNum();
      }
    },
    reset() {
      this.params = {pageSize: 20, current: 1};
      this.getList();
    },
    changeNum() {
      this.params.current = 1;
      this.params.pageSize = 20;
      this.getList();
    },


    handleAddSubmit() {
      const url = this.form.id ? editApi : addApi;
      url(this.form).then(res => {
        this.$Message.success(res.message);
        this.currentItem = {};
        this.createStatus = false;
        this.getList();
      })
          .catch(error => {
            console.error('Error submitting form:', error);

          });

    },
    // 点击详情
    toDetail(row) {
      this.$router.push({
        path: '/workPlanDetail/index', row,
      })
    },
    // 点击开工
    handleEditRow(row) {
      this.startForm = {...row};
      this.startShow = true;
    },
    // 点击报工
    reportWork(row) {
      this.reportWorkItem = row;
      for (const item of this.equipmentList) {
        if (item.id == this.searchParams.id) {
          this.reportWorkItem.equipmentName = item.equipmentName
        }
      }
      this.reportWorkShow = true;
    },
    // 点击删除
    handleDeleteRow(row) {
      this.currentItem = row;
      this.deleteShow = true;
    },
    // 确认删除
    handleDeleteSure() {
      this.axios
          .delete("/api/workOrder/delete", {
            ids: [this.currentItem.id]
          })
          .then((res) => {
            if (res.code === 200) {
              this.$Message.success(res.message);
              this.currentItem = {};
              this.deleteShow = false;
              this.getList();
            } else {
              this.$Message.warning(res.message);
            }
          });
    },
    changePageNum(val) {
      this.params.current = val;
      this.getList();
    }
    ,
    changePageSize(val) {
      this.params.pageSize = val;
      this.getList();
    }
  }
}
</script>

<style scoped>
.tableContent {
}

.iViewIcon {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
